<script lang="ts">
import {Vue, Component, Watch} from 'vue-property-decorator';
import {deleteUsers, getUserInfo} from "@/api/users";

interface Info {
  id:number,
  idNumber:string,
  name:string,
  phone:string,
  sex:string,
  createTime?:string,
  avatar?:string
}

@Component({
  name:'User'
})
export default class index extends Vue {
  private currentPage = 1
  private pageSizes = [3,5,7,9,11,13,15]
  private pageSize = 9
  private total:number = null
  private userName:string = ''
  private userInfo = []
  private users = []
  private loading = false
  private dialogVisible = false
  public Info:Info = {
    id:null,
    idNumber:'',
    name:'',
    phone:'',
    sex:'',
    avatar:'',
  }

  @Watch('userName')
  onChangeValue(newVal:string) {
    if(!newVal) {
      this.getUserInfo()
    }
  }

  created(){
    this.getUserInfo()
  }

  handleSizeChange(newSize){
    this.pageSize = newSize
    this.getUserInfo()
  }

  handleCurrentChange(newCurrentPage){
    this.currentPage = newCurrentPage
    this.getUserInfo(this.currentPage)
  }

  async getUserInfo(pager=1) {
    this.currentPage = pager
    const {data} = await getUserInfo({
      name:this.userName,
      page:this.currentPage,
      pageSize:this.pageSize
    })
    console.log(data)
    if(data.code===1) {
      this.userInfo = data.data.records
      this.total = data.data.total
    }
  }
  handleSelectionChange(users){
    console.log(users)
    if(users.length!==0) {
      this.users = []
      users.forEach(item=>{
        this.users.push(item.id)
      })
      console.log("wyb", this.users)
    }else {
      this.users = []
      console.log("wyb", this.users)
    }
  }

  async deleteSelectedUsers(){
    this.loading = true
    const {data} = await deleteUsers(this.users)
    if(data.code===1) {
      this.loading = false
      this.$message.success({
        type:'success',
        message:'批量删除成功'
      })
      await this.getUserInfo(this.currentPage)
    }else {
      this.loading = false
      this.$message.error({
        type:'error',
        message:'删除失败'
      })
      return
    }
  }

   deleteUser = async (row) => {
    this.loading = true
     this.users = []
     this.users.push(row.id)
     const {data} = await deleteUsers(this.users)
     if(data.code===1) {
       this.loading = false
       this.$message.success({
         type:'success',
         message:'删除成功'
       })
       this.users = []
       await this.getUserInfo(this.currentPage)
     }else {
       this.loading = false
       this.$message.error({
         type:'error',
         message:'删除失败'
       })
       return
     }
   }

  UserInfo(user){
    this.dialogVisible = true
    console.log("wyb",user)
    this.Info = Object.assign({}, user)
  }

   cancelDelete() {
   }

}
</script>

<template>
  <div>
    <el-card class="card" style="margin: 10px 20px;">
      <el-form :inline="true" style="position:relative;margin-top: 10px;margin-left: 20px">
        <el-form-item label="用户名称:" style="margin-right: 40px">
          <el-input v-model="userName" style="width: 300px" placeholder="请填写用户名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getUserInfo()" type="primary">查询</el-button>
        </el-form-item>
        <el-form-item style="position: absolute;right: 10px">
          <el-popconfirm
          title="确定要删除选中的用户吗"
          icon="el-icon-nfo"
          icon-color="red"
          @onConfirm="deleteSelectedUsers"
          @onCancel="cancelDelete">
            <template v-slot:reference>
              <el-button :disabled="!users.length" type="danger">批量删除</el-button>
            </template>
          </el-popconfirm>
        </el-form-item>
      </el-form>
      <el-table border :data="userInfo" @selection-change="handleSelectionChange">
        <el-table-column width="70" type="selection"></el-table-column>
        <el-table-column align="center" prop="name" label="用户名称"></el-table-column>
        <el-table-column align="center" prop="phone" label="手机号"></el-table-column>
        <el-table-column width="80" prop="sex" label="性别"></el-table-column>
        <el-table-column align="center" prop="createTime" width="200" label="创建时间"></el-table-column>
        <el-table-column width="150" align="center" label="操作">
          <template v-slot="{row}">
            <el-button @click="UserInfo(row)" circle style="margin-left: -20px;color: white;background-color: #4ea1e1" size="small" icon="el-icon-search"></el-button>
            <el-popconfirm
              title="确定要删除该用户吗"
              icon="el-icon-nfo"
              icon-color="red"
              @onConfirm="deleteUser(row)"
              @onCancel="cancelDelete">
              <template v-slot:reference>
                <el-button :loading="loading" circle type="danger" style="margin-left: 10px" icon="el-icon-delete" size="small"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination layout="total, sizes, prev, pager, next, jumper"
                     background
                     hide-on-single-page
                     :current-page="currentPage"
                     :page-sizes="pageSizes"
                     :page-size="pageSize"
                     class="userList"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :total="total"
                     style="margin-top: 20px;text-align: center"
      ></el-pagination>
    </el-card>
    <el-dialog title="查看信息" :visible.sync="dialogVisible" :before-close="()=>dialogVisible = !dialogVisible">
      <template v-slot:default>
        <div class="dialog">
          <ul class="info">
            <li>
              <h3 style="float: left">用户头像：</h3>
              <img :src="Info.avatar" class="avatar" alt="">
            </li>
            <li>
              <h3>
                用户名称：{{Info.name}}
              </h3>
            </li>
            <li>
              <h3>
                用户性别：{{Info.sex}}
              </h3>
            </li>
            <li>
              <h3>
                用户电话：{{Info.phone}}
              </h3>
            </li>
            <li>
              <h3>
                身份证号：{{Info.idNumber}}
              </h3>
            </li>
            <li>
              <h3>
                创建时间：{{Info.createTime}}
              </h3>
            </li>
          </ul>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.card {
  height: 100%;
}

.dialog{
  width: 50%;
  margin: 0 200px;
  .avatar {
    margin-left: 100px;
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
  }
}
</style>

<style>
.info {
  height: 400px;
  font-size: 14px;
}
.info li {
  margin-top: 30px;
}
</style>
